<template>
    <div>
        <div class="header">
            故障报修列表
        </div>
        <div style="padding:0 30px">
            <el-form ref="form" :model="form" label-width="80px">
                <div class="top">
                    <el-form-item label="报修标题" label-width="80px">
                        <el-input v-model="query.name" style="width:180px" placeholder="报修标题"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" label-width="50px">
                        <el-input v-model="query.address" style="width:180px" placeholder="地址"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" label-width="50px">
                        <el-input v-model="query.tel" style="width:180px" placeholder="电话"></el-input>
                    </el-form-item>
                    <el-form-item label="按时间查询" label-width="90px">
                        <div class="block">
                            <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                :picker-options="pickerOptions" style="width:240px">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="维修状态" label-width="80px">
                        <el-select v-model="query.state" placeholder="请选择" style="width:130px">
                            <el-option v-for="item in state" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="维修类型" label-width="80px">
                        <el-select v-model="query.type" placeholder="请选择" style="width:130px">
                            <el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="居民" label-width="50px" style="width:130px">
                        <el-input v-model="query.userid" style="width:180px" placeholder="电话"></el-input>
                    </el-form-item>

                </div>
                <el-button type="primary" style="width:100px" @click="onSubmit">查询</el-button>
            </el-form>
        </div>
        <!-- 批量删除 -->
        <div style="margin-top: 22px;padding:0 25px">
            <el-button type="danger">批量删除</el-button>
        </div>
        <!-- 表格 -->
        <div style="padding:20px">
            <Table :tableCols="tableCols" :tableData="tableData" :total="total" :selection="selection"
                @pagechange="pagechange">
                <!-- 故障类型 -->
                <template #content="{ row }">
                    <el-link type="primary" @click="Details(row)">{{row.typename}}</el-link>
                </template>
                <template #image="{row}">
                    <el-image style="width: 50px; height: 50px" v-for="item in row.images" :key="item.id"
                        :src="IMGURL+item.url" fit="contain" :preview-src-list="row.srclist">
                    </el-image>
                </template>
                <template #option="{row}">
                    <el-button type="success" @click="handleClick(row)">修改</el-button>
                    <el-button type="danger" @click=del(row.id)>删除</el-button>
                </template>
            </Table>
        </div>
        <!-- 添加 -->
        <div>
            <Add :dialogVisible="dialogVisible" @isclose="isclose" :handleClickdata="handleClickdata"></Add>
        </div>
        <!-- 详情 -->
        <div>
            <Details :dialogVisibles="dialogVisibles" :handleClickdata="handleClickdata"  @iscloses="iscloses"></Details>
        </div>
    </div>
</template>

<script>
import Table from './Table/Table.vue';
import Add from '@/components/add/addrepairs.vue'
import Details from '@/components/详情/repairsXQ.vue'
import { repairslist, Del,repairstype,repairstate } from '@/api/repairs'
import { IMGURL } from '@/api/config'
export default {
    components: {
        Table,
        Add,
        Details
    },
    data() {
        return {
            dialogVisible: false,
            dialogVisibles:false,
            srclist: [],
            IMGURL: IMGURL,
            selection: true,
            form: {},
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value2: '',
            total: 0,
            query: {
                page: 1,
                psize: 5,
                key: ""
            },
            tableCols: [
                {
                    prop: "id",
                    lable: "id",
                    width: 70
                },
                {
                    // prop: "typename",
                    lable: "故障类型",
                    coltype:"content",
                    slotname:"content"
                },
                {
                    prop: "address",
                    lable: "维修地址",
                },
                {
                    lable: "故障图片",
                    coltype: "image",
                    slotname: "image",
                },
                {
                    prop: "content",
                    lable: "故障描述",
                },
                {
                    prop: "statename",
                    lable: "维修状态",
                },
                {
                    prop: "username",
                    lable: "业主名称",
                },
                {
                    prop: "addtime",
                    lable: "维修日期",
                },
                {
                    lable: "操作",
                    coltype: "option",
                    slotname: "option",
                },
            ],
            tableData: [],
            handleClickdata: {},
            type:[],
            state:[]
        }
    },
    created() {
        this.getrepairslist()
        this.getrepairstype()
        this.getrepairstate()
    },
    methods: {
        async getrepairslist() {
            let res = await repairslist(this.query)
            if (res.errCode == 10000) {
                res.data.list.map(item => {
                    item.srclist = item.images.map(val => { return this.IMGURL + val.url })
                })
                this.tableData = res.data.list
                this.total = res.data.counts
            }
        },
        // 维修类型
        async getrepairstype(){
            let res = await repairstype()
            if(res.errCode==10000){
                this.type = res.data.list
            }
        },  
        // 维修状态
        async getrepairstate(){
            let res = await repairstate()
            if(res.errCode==10000){
                this.state = res.data.list
            }
        },
        // 深拷贝
        // 数据的刷新
        isclose(val, isrefresh = false, editdata = {}) {
            this.dialogVisible = val
            this.handleClickdata = editdata
            if (isrefresh) {
                this.getrepairslist()
            }
        },
        // 深拷贝
        // 数据的刷新
        iscloses(val,) {
            this.dialogVisibles = val
            
        },
        // 修改
        handleClick(val) {
            this.handleClickdata = JSON.parse(JSON.stringify(val))
            this.dialogVisible = true
        },
        Details(val){
            this.handleClickdata = JSON.parse(JSON.stringify(val))
            this.dialogVisibles = true
        },
        
        // 查询
        onSubmit() {
            this.getrepairslist()
        },
        del(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await Del({ id: id })
                if (res.errCode == 10000) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }
                this.getrepairslist()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        // 分页
        pagechange(val) {
            this.query = val
            this.getrepairslist()
        }
    }
}
</script>

<style lang="less" scoped>
.header {
    display: flex;
    position: relative;
    padding: 0 10px;
    height: 50px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    color: #427ff4;
    font-size: 16px;
}

.top {
    display: flex;

}
</style>